<template>
	<view class="my-content">
		<u-form :model="searchForm" ref="uForm" label-position="top">
			<view class="bgWhite padding">
				<u-form-item :label="$t('收件人')">
					<u-input v-model="searchForm.addressee" :placeholder="$t('请添加收件人邮箱')" />
					<template v-slot:right>
						<u-icon @click="addUser" name="plus-circle"></u-icon>
						<u-icon @click="addUser" name="arrow-down" class="u-margin-left-20"></u-icon>
					</template>
				</u-form-item>
			</view>
			<view class="bgWhite padding">
				<u-form-item :label="$t('发件人')">
					<u-input v-model="searchForm.sender" :placeholder="$t('请添加发件人邮箱')" />
				</u-form-item>
			</view>
			<view class="bgWhite padding">
				<u-form-item :label="$t('回邮地址')">
					<u-input v-model="searchForm.replyAddress" :placeholder="$t('请添加回邮地址')" />
				</u-form-item>
			</view>
			<view class="bgWhite padding">
				<u-form-item :label="$t('模板')">
					<u-input v-model="searchForm.template" :placeholder="$t('请选择邮件模板')" disabled
						@click="showPicker = true" :custom-style="myStyle" />
				</u-form-item>
			</view>
			<view class="bgWhite padding">
				<u-form-item :label="$t('邮件主题')">
					<u-input v-model="searchForm.title" :placeholder="$t('点击添加邮件主题')" />
				</u-form-item>
			</view>
			<view class="bgWhite padding">
				<u-form-item :label="$t('邮件内容')">
					<u-input type="textarea" height="300" v-model="searchForm.content" :placeholder="$t('请输入')" />
				</u-form-item>
			</view>

		</u-form>
		<view class="footer">
			<u-button type="primary" :custom-style="customStyle" hover-class="none" @click="sendEmail">
				{{$t("发送邮件")}}
			</u-button>
		</view>
		<u-picker mode="selector" :title="$t('选择模板')" v-model="showPicker" :range="selectorObj" range-key="name"
			@confirm="pickerConfirm"></u-picker>

		<u-modal v-model="confirmSendModal" :show-title="false" :show-confirm-button="false" :mask-close-able="true">
			<view class="slot-content padding u-text-center">
				<view class="modalTitle">
					{{$t("本次发送邮件需要消耗邮件数量")}}
				</view>
				<view>
					<text class="bigNum">500</text>
					<text class="u-font-26">{{$t("封")}}</text>
				</view>
				<view class="u-font-26 u-margin-top-20 u-margin-bottom-30">{{$t("是否确认发送？")}}</view>
				<view class="u-margin-bottom-20">
					<u-button type="primary" :custom-style="customStyleBySend" hover-class="none" @click="doSendEmail">
						{{$t("确认发送")}}
					</u-button>
				</view>
			</view>
		</u-modal>
		<u-modal v-model="confirmPayModal" :show-title="false" :show-confirm-button="false" :mask-close-able="true">
			<view class="slot-content padding u-text-center">
				<view class="modalTitle">
					{{$t("非常抱歉，您的剩余邮件数量不足")}}
					<view>{{$t("请立即充值！")}}</view>
				</view>
				<!-- <view class="u-font-26 u-margin-top-20 u-margin-bottom-30">{{$t("是否确认发送？")}}</view> -->
				<view class="u-margin-bottom-20 u-margin-top-30">
					<u-button type="primary" :custom-style="customStyleBySend" hover-class="none" @click="toPay">
						{{$t("去充值")}}
					</u-button>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				confirmPayModal: false,
				confirmSendModal: false,
				myStyle: {
					textAlign: 'left',
					pointerEvents: "none"
				},
				customStyleBySend: {
					background: 'linear-gradient(110deg, #DD2910 0%, #F79B29 100%)',
					'border-radius': '35rpx',
					height: '60rpx',
					'width': '300rpx',
				},
				customStyle: {
					background: 'linear-gradient(110deg, #DD2910 0%, #F79B29 100%)',
					'border-radius': '15rpx',
					'width': '480rpx',
				},
				searchForm: {
					addressee: "",
					sender: "",
					replyAddress: "",
					template: '',
					title: '',
					content: ''
				},
				showPicker: false,
				selectorObj: [],
				limitType: ['doc', 'xls', 'ppt', 'pdf', 'docx', 'xlsx', 'pptx'],
			};
		},
		methods: {
			//添加收件人
			addUser() {
				console.log('跳转添加收件人页面');
			},
			//发送邮件接口
			doSendEmail() {
				this.confirmPayModal = true;
			},
			//发送邮件
			sendEmail() {
				console.log(this.searchForm);
				this.confirmSendModal = true;
			},
			//选择主题确定
			pickerConfirm(e) {
				console.log(e[0]);
			},
			//跳转充值页面
			toPay() {
				//建议跳转到 积分充值和会员充值的页面，统一管理
			}
		}
	}
</script>

<style lang="scss">
	.my-content {
		background-color: #f6f6f6;
		height: auto;
		min-height: 100%;
		padding: 20rpx 0;
		padding-bottom: 110rpx;

		.slot-content {
			.modalTitle {
				font-weight: 800;
				margin-top: 20rpx;
				margin-bottom: 20rpx;
			}

			.bigNum {
				color: #ff7348;
				font-size: 60rpx;
				font-weight: 800;
			}
		}

		.footer {
			position: fixed;
			left: 0;
			bottom: 20rpx;
			width: 100%;
			text-align: center;
			z-index: 2;
		}

		.bgWhite {
			background: #fff;
		}

		.padding {
			padding: 10rpx 30rpx;
		}
	}
</style>